<template>
  <div class="warp">
    <div class="order-title">
      {{ order.createTime }}<span class="order-time">订单号: {{ order.orderId }}</span>
    </div>
    <div flex="main:left" class="table-warp" 
      style="display:flex; justify-content: flex-start; "
    >
      <div :span="18" class="content-warp">
        <div
          v-for="(item, index) in order.courseInfos"
          class="content-item"
          :key="index"
          flex="main:justify" 
          style="display: flex; justify-content: space-between; "
        >
          <div flex="main:justify cross:center" 
            style="display:flex; justify-content: space-between; align-items:center; "
          >
            <img :src="item.courseThumb" />
            <div class="class_warp">
              <p class="text-ellipsis-single lesson_title" @click="lessonDetail(item)">{{ item.courseName }}</p>
              <p class="text-ellipsis-Multiline dec">{{ item.briefDescribe }}</p>
            </div>
               <p class="item-amount" flex="cross:center">
            ￥ {{ item.price.toFixed(2) }}/{{ item.validYears }}年
          </p>
          </div>
       
        </div>
      </div>
      <div class="total" :span="2" >
        <p class="status_text">{{ getPayStatus(order.status) }}</p>
        <p class="price_1" v-if="order.orderAmountNeedPay===order.orderAmountTotal">￥ {{ order.orderAmountNeedPay.toFixed(2) }}</p>
        <p class="item-amount">￥ {{ order.orderAmountNeedPay.toFixed(2) }}</p>
      </div>
      <!-- <div class="total" :span="2"  v-if="checkOrder">
   
      </div> -->
      <div class="total" :span="2"  v-if="!checkOrder">
        <p class="status_text">{{ getStatus(order.status) }}</p>
      </div>
      <div class="total" :span="2"  v-if="!checkOrder">
        <div v-if="getPayStatus(order.status) === '待付款'">
          <el-button type="text" @click.native="toPay">去付款</el-button>
          <span class="status_text"  style="font-size:12px" @click="cancel">取消订单</span>
        </div>
        <div v-else>
          <div v-if="getStatus(order.status) === '已完成'">
            <p class="status_text">交易时间：</p>
            <p class="status_text">{{order.finishTime}}</p>
          </div>
          <div v-if="getStatus(order.status) === '已取消'">
            <el-button type="text" @click="toReOrder">重新购买</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">

import { cancelOrder, reOrder } from "/@/api/order"

import router from '/@/router'

export default {
  props: {
    order: { },
    checkOrder:{
      type:Boolean,
      default:false,
    }
  },
  data() {
    return {
    
    };
  },
 
  methods: {
    // Ordered	1 完成
    // Paying	2	待支付
    // Payed	3	已支付
    // Canceled	99 取消
    getPayStatus(status) { // 订单支付状态
      switch (status) {
        case 1:
          return "待付款";
        case 2:
          return "待付款";
        case 3:
          return "实付款";
        case 99:
          return "已取消";
      }
    },
    getStatus(status) { // 定单状态
      switch (status) {
        case 1:
          return "交易进行中";
        case 2:
          return "交易进行中";
        case 3:
          return "已完成";
        case 99:
          return "已取消";
      }
    },
    toPay() {
      router.push({ name: "order-checkOrder",query:{orderId:this.order.orderId}}) // 跳转到支付确认页面
    },
    cancel() {
      cancelOrder({orderId:this.order.orderId}).then((res) =>{ // 取消订单
         this.$emit('cancel',res.orderInfo)
      }).catch(()=>{})
    },
    lessonDetail(lesson) { 
      router.push({ name: "course-courseDetail",query:{courseId:lesson.courseId}}) // 跳转到课程详情页
    },
    toReOrder() {
        reOrder({OrderId:this.order.orderId}).then((res) =>{
          router.push({ name: "order-checkOrder",query:{orderId:res.newOrderId}}) // 重新下单， 并跳转到支付确认页面
        }).catch(( )=>{ })
    }
  },
};
</script>

<style lang="scss" scoped>
// @import "@/assets/style/element-variables.scss";

.table-warp{
  border-right: 1px solid rgba(219, 124, 65, 0.1);
  border-bottom: 1px solid rgba(219, 124, 65, 0.1);
  border-left: 1px solid rgba(219, 124, 65, 0.1);
  border-radius:0 0 6px 6px ;
  overflow: hidden;
}
.order-title {
  height: 40px;
  line-height: 40px;
  text-indent: 1em;
  background: #FFF6F1;
  font-size:16px;
  border-radius:6px 6px 0 0 ;
}
.order-time{
  font-size:14px;
  color: #808080;
  margin-left: 20px;
}
.price_1{
  text-decoration: line-through;
  color: #999999;
  font-size:14px
}
.warp {
  // border: 1px solid rgba(219, 124, 65, 0.1);
  // color: #808080;
  margin-bottom: 40px;
}
.content-warp {
  width: 100%;
}

.content-item {
  border-top: 1px solid rgba(219, 124, 65, 0.1);
  padding: 20px;
}
.total {
  border-top: 1px solid rgba(219, 124, 65, 0.1);
  border-left: 1px solid rgba(219, 124, 65, 0.1);
  width: 20%;
  padding: 20px 0;
  text-align: center;
  p{
    line-height:40px;
  }
}
img {
  width: 170px;
  height: 100px;
 
  flex-shrink: 0;
  border-radius:6px
}
.item-amount {
  font-size:16px;
  text-align: center;
 color: #666666;
 flex-shrink: 0;
 
}
.class_warp{
 margin: 0 20px;
  width: 46%;
}
.dec{
  font-size:14px;
  color: #808080;
  margin-top: 10px;
}
.status_text{
  font-size:16px;
  padding: 0 10px;
  font-size: 14px;
  color: #808080;
  cursor: pointer;
}
.lesson_title:hover{
  color: var(--el-color-primary);
  cursor: pointer;
}
</style>